<template>
  <div class="echarts-map-wrap">
    <div id="echartsMap" style="height: 100%"></div>
  </div>
</template>

<script>
import mapJson from './putuo.js'; // 你的旧地图数据
import * as echarts from 'echarts';
import 'echarts-gl'; // 引入 echarts-gl 以支持 3D 地图

export default {
  data() {
    return {
      echartsData: [],
      myChart: null,
    };
  },
  methods: {
    initEchart() {
      const geoJson = mapJson;
      echarts.registerMap('putuo', geoJson);
        const isScreen1920 = window.innerWidth <= 1920;

      // 数据
      const data = [
        { name: '桃浦派出所', value: 85 },
        { name: '长征派出所', value: 70 },
        { name: '真如派出所', value: 75 },
        { name: '甘泉路派出所', value: 78 },
        { name: '长寿路派出所', value: 80 },
        { name: '长风新村派出所', value: 100 },
        { name: '曹杨新村派出所', value: 80 },
        { name: '石泉路派出所', value: 100 },
        { name: '万里派出所', value: 100 },
        { name: '宜川新村派出所', value: 100 },
      ];

      const option = {
        visualMap: {
          show: false,
          min: 70,
          max: 100,
          calculable: false,
          realtime: false,
          inRange: {
            color: [
              '#4d8eff',
              '#f321b7',
              '#eaa206',
              '#7599f3',
              '#00d0ff',
            ], // 颜色范围
          },
          textStyle: {
            color: '#fff',
          },
        },
        series: [
          {
            tooltip: {
              trigger: 'item',
              formatter: function (params) {
                const { name, value } = params;
                return `<span style='color:#fff;'>${name}</span><br/>数量：${value}`;
              },
            },
            zlevel: 1,
            name: '上海普陀区',
            type: 'map3D',
            map: 'putuo', // 使用注册的地图名称
            boxDepth: 120, // 地图倾斜度
            regionHeight: 5, // 地图厚度
            label: {
              show: true, // 是否显示区域名称
              textStyle: {
                color: '#a6e5ff', // 文字颜色
                fontSize: isScreen1920 ? 20 : 50, // 文字大小
                fontFamily: '微软雅黑',
                backgroundColor: 'rgba(0,0,0,0)', // 透明度0清空文字背景
              },
            },
            itemStyle: {
              opacity: 0.9, // 透明度
              borderWidth: 0.6, // 分界线宽度
              borderColor: '#207fce', // 分界线颜色
            },
            groundplane: {
              show: false, // 不显示地面
            },
            data, // 数据
            realisticMaterial: {
              detailTexture: '#fff', // 纹理贴图
              textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
              roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
              metalness: 0, // 0材质是非金属 ，1金属
              roughnessAdjust: 0,
            },
            viewControl: {
              projection: 'perspective', // 透视投影
              distance: isScreen1920 ? 130 : 180, // 视角距离
              center: [5, -10, 0], // 视角中心
            },
          },
        ],
        animation: false, // 关闭动画
      };

      this.myChart = echarts.init(document.getElementById('echartsMap'));
      this.myChart.setOption(option);

      // 绑定点击事件
      this.myChart.on('click', (params) => {
        this.$emit('open', params);
      });
    },
  },
  mounted() {
    this.initEchart();
    window.addEventListener('resize', () => {
      if (this.myChart) {
        this.myChart.resize();
      }
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      if (this.myChart) {
        this.myChart.resize();
      }
    });
    if (this.myChart) {
      this.myChart.dispose();
    }
  },
};
</script>

<style lang="stylus" scoped>
.echarts-map-wrap {
  height: 100%;
  pointer-events: auto;
}
</style>